<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
  <div class="form-group">

    <div class="input-group">
      <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control"
        formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
      >
      <div class="input-group-append">
        <button class="btn btn-sm btn-outline-secondary" (click)="togglePasswordVisibility()" type="button">
          <ng-container *ngIf="!showPassword" i18n>Show</ng-container>
          <ng-container *ngIf="!!showPassword" i18n>Hide</ng-container>
        </button>
      </div>
    </div>
    <div *ngIf="formErrors.password" class="form-error">
      {{ formErrors.password }}
    </div>
  </div>

  <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
</form>
